<template>
  <el-input v-model="filter.value" placeholder="请输入" class="my-search" clearable @keyup.enter.native="onSearch">
    <el-select slot="prepend" v-model="filter.field" placeholder="请选择" style="width: 100px" @change="onChange">
      <el-option v-for="(o, index) in newFields" :key="index" :label="o.label" :value="o.value" />
    </el-select>
    <template #append>
      <el-button icon="el-icon-search" @click="onSearch" />
    </template>
  </el-input>
</template>

<script>
  /**
 * 查询组件
 * 使用说明
  import MySearch from '@/components/my-search'
  components: { MySearch }
  fields: [
    { value: 'userName', label: '用户名', default: true },
    { value: 'nickName', label: '昵称', type: 'string' },
    { value: 'createdTime', label: '创建时间', type: 'date', config: { type: 'date' }}
  ],
  <my-search :fields="fields" @click="onSearch" />
*/
  export default {
    name: "MySearch",
    props: {
      fields: {
        type: Array,
        default () {
          return [];
        },
      },
    },
    data() {
      const newFields = [];
      this.fields.forEach((a) => {
        if (!a.type || a.type === "string") {
          newFields.push(a);
        }
      });

      let fieldValue = "";
      let operatorValue = "Equal";       if (newFields.length > 0) {         const field = newFields.find((a) => a.default === true);          if (field) {           fieldValue = field.value;
           if (field.operator) {             operatorValue = field.operator;           } else {
            operatorValue = "Equal"           }
        } else {            fieldValue = newFields[0].value;           if (newFields[0].operator) {
             operatorValue = newFields[0].operator;           } else {             operatorValue = "Equal"            }         }
      }
      return {
        newFields: newFields,
        filter: {
          field: fieldValue,
          operator: operatorValue,
          value: "",
        },
      };
    },
    computed: {},
    watch: {},
    mounted() {},
    methods: {
      onChange(value) {
        // const field = this.fields.find(a => a.value === value)
        this.filter.value = "";
      },
      // 查询
      onSearch() {
        const condition = this.filter.value !== "" ? {
          ...this.filter
        } : null;
        var dynamicFilter = {
          Condition: condition,
        };
        this.$emit("click", dynamicFilter);
      },
    },
  };
</script>

<style lang="scss" scoped>
  ::v-deep .my-search-window {
    .el-dialog__body {
      padding: 10px;
    }
  }
</style>
